<!doctype html>
<html lang="en">
  <head>
    <title>Sample form</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
      <form action="ap/todos" method="post" enctype="multipart/form-data" onsubmit="submitForm(this);return false;">
          <div class="form-group">
              <label for="name">Name</label>
              <input type="text" required class="form-control" name="name" aria-describedby="emailHelp" placeholder="Enter the name">
          </div>
          <div class="form-group">
              <label for="visibility">Visibility</label>
              <select class="form-control" required name="visibility">
                  <option value="Public">Public</option>
                  <option value="Private">Private</option>
              </select>
          </div>
          <div class="form-group">
              <label for="attachment">Attachment</label>
              <input type="file" class="form-control-file" name="attachment">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>

          <div style="margin-top:15px">
              <output name="result"></output>
          </div>
      </form>

      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

      <script type="text/javascript">
          async function submitForm(oFormElement) {
              var resultElement = oFormElement.elements.namedItem("result");
              const formData = new FormData(oFormElement);

              try {
                  const response = await fetch(oFormElement.action, {
                      method: oFormElement.method,
                      body: formData
                  });

                  if (response.ok) {
                      window.location.href = '/sample.html';
                  }

                  resultElement.value = 'Result: ' + response.status + ' ' +
                      response.statusText;
              } catch (error) {
                  console.error('Error:', error);
              }
          }
      </script>
  </body>
</html>
